<template>
  <div class="wrapper">
    <img src="../../assets/img/formTop.jpg">
    <div class="content">
      <h2>返 校 申 请</h2>
      <div class="elFrom">
        <el-button type="text" v-show="!havenNoProcess" @click="havenNoProcess=true">申请记录</el-button>
        <el-button type="text" v-show="havenNoProcess && havenProcess" @click="havenNoProcess=false">返 回</el-button>
        <el-form :model="backSchool" :rules="rules" ref="ruleForm" label-width="20%" v-show="!havenNoProcess">
          <el-form-item label="姓名" prop="name">
            <el-input v-model="alumni.realName" disabled></el-input>
          </el-form-item>
          <el-form-item label="性别" prop="sex">
            <el-select v-model="alumni.sex" placeholder="请选择性别" disabled>
              <el-option label="男" value="男"></el-option>
              <el-option label="女" value="女"></el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="在校学号" prop="stuNumber">
            <el-input v-model="alumni.stuNumber" disabled></el-input>
          </el-form-item>
          <el-form-item label="手机号" prop="phone">
            <el-input v-model="currentUser.phone"></el-input>
          </el-form-item>
          <el-form-item label="邮箱" prop="email">
            <el-input v-model="alumni.email"></el-input>
          </el-form-item>
          <el-form-item label="返校事由" prop="backFor">
            <el-input v-model="backSchool.backFor"></el-input>
          </el-form-item>
          <el-form-item label="返校时间" prop="backTime">
            <el-date-picker
              v-model="backSchool.backTime"
              type="datetime"
              placeholder="选择日期时间">
            </el-date-picker>
          </el-form-item>
          <el-form-item label="需求帮助" prop="needHelp">
            <el-input type="textarea" v-model="backSchool.needHelp" style="width: 80%"></el-input>
          </el-form-item>
          <div style="width: 100%; text-align: center;">
            <el-button type="primary" @click="submitForm('ruleForm')">提交申请</el-button>
            <el-button @click="resetForm('ruleForm')">重置</el-button>
          </div>
        </el-form>
        <div class="untreated" v-show="havenNoProcess">
          <h4 v-show="!havenProcess"><i class="el-icon-warning-outline"></i> 您有一个返校申请未处理，暂不能再次申请！</h4>
          <el-table :data="backSchoolList">
            <el-table-column type="index" width="50" label="序号"></el-table-column>
            <el-table-column prop="backFor" label="返校事由"></el-table-column>
            <el-table-column prop="backTime" label="返校时间"></el-table-column>
            <el-table-column prop="needHelp" label="需求帮助"></el-table-column>
            <el-table-column label="审批状态">
              <template slot-scope="scope">
                <el-tag :type="scope.row.isAgree ? (scope.row.isAgree===0 ? 'error' : 'success') : 'warning'">
                  {{scope.row.isAgree ? (scope.row.isAgree===0 ? '已拒绝' : '已同意') : '待处理'}}
                </el-tag>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
    export default {
        name: "BackSchool",
        data() {
            return {
                backSchool: {
                    backFor: '',
                    backTime: '',
                    needHelp: '',
                    createBy: 0,
                    createTime: '',
                    alumniId: 0
                },
                rules: {
                    backFor: {required: true, message: '请输入返校事由', trigger: 'blur'},
                    backTime: {required: true, message: '请选择返校日期和时间', trigger: 'blur'}
                },
                currentUser: {},
                alumni: {},
                backSchoolList: [],
                havenNoProcess: false,
                havenProcess: true
            }
        },
        inject: ['reload'],
        methods: {
            submitForm(ruleForm){
                this.$refs[ruleForm].validate(valid=>{
                    if(valid){
                        this.backSchool.createBy=this.currentUser.userId;
                        this.backSchool.alumniId=this.alumni.alumniId;
                        this.backSchool.createTime=this.datetime2string(new Date());
                        this.backSchool.backTime=this.datetime2string(this.backSchool.backTime);
                        this.postRequest('/addBackSchool', this.backSchool).then(res=>{
                            if(res==='success'){
                                this.$message.success('返校申请已提交，等待管理员审核！');
                                this.reload();
                            }else{
                                this.$message.error('操作失败！');
                            }
                        })
                    }else{
                        this.$message.error("请输入返校事由和返校时间！");
                        return false;
                    }
                })
            },
            resetForm(ruleForm){
                this.$refs[ruleForm].resetFields();
            },
            getAlumni(){
                const params={alumniId: this.currentUser.alumniId};
                this.getRequest('/getAlumniDetail', params).then(res=>{
                    if(res){
                        this.alumni=res;
                    }else{
                        console.log('获取当前校友信息失败!');
                    }
                })
            },
            getBackSchoolRecord(){
                const params= {alumniId: this.currentUser.alumniId};
                this.getRequest('/getBackSchoolRecord', params).then(res=>{
                    if(res){
                        this.backSchoolList=res.list;
                        res.list.forEach(item=>{
                            if(!item.isAgree){
                                this.havenNoProcess=true;
                                this.havenProcess=false;
                            }
                        })
                    }else{
                        console.log('未找到返校记录!');
                    }
                })
            }
        },
        created() {
            const user=sessionStorage.getItem('currentUser');
            this.currentUser=JSON.parse(user);
            this.getAlumni();
            this.getBackSchoolRecord();
        }
    }
</script>

<style scoped>
  .wrapper {
    padding-left: 5%;
  }

  img {
    width: 100%;
  }

  h2 {
    text-align: center;
    margin-bottom: 40px;
    color: #0057A7;
  }
  .content{
    width: 99.7%;
    margin-bottom: 30px;
    padding-top: 40px;
    box-shadow: 0 1px 6px 0 #cddcf5;
    min-height: 500px;
  }
  .elFrom{
    width: 70%;
    margin: 0 auto;
  }
  .el-form{
    padding-bottom: 30px;
  }
  .el-input{
    width: 80%;
  }
  .el-select{
    width: 80%;
  }
  h4{
    margin: 30px 0;
    color: red;
  }
  .untreated{
    margin: 30px 0;
  }
</style>
